  import * as React from 'react';
  import '../style/test.css'

  interface IProps {
      color: string,
      size?: string,
  }
  interface IState {
      count: number,
      s1:string[]
  }
  export default class Test extends React.Component<IProps, IState> {
      public state: Readonly<IState> = {
          count: 0,
          s1:['lsdfsdf','手动阀手动阀','实力上来说']
      };
      constructor(Props:IProps) {
          super(Props);
          this.fnClick=this.fnClick.bind(this);
      }
      public fnClick(index:number): void{

          this.setState({
              count:index
          });
      }
      public componentDidMount(): void {

          this.setState({
              count:2
          });
      }

      public render() {
          // const { color, size } = this.props;
          const {count, s1} = this.state;
          return (
              <div>
                  <h4>{count}</h4>
                  <div className="tab">
                      {s1.map((s:string, index:number)=>{
                          return <button className={index===count?"active":''} data-s={index} onClick={this.fnClick.bind(this,index)} key={index}>{s}</button>
                      })}
                      {s1.map((s:string, index:number)=>{
                          return <div style={{display:index===count?'block':'none'}} data-s={index} onClick={this.fnClick.bind(this,index)} key={index}>{s}</div>
                      })}

                  </div>
              </div>
          )
      }
  }
